16~69歳の視覚障がい者の 91.7%
インターネットを利用しています。

視覚障がい者のための
Web アクセシビリティ
入門以前

2017年11月25日
視覚障がい者の Web 利用方法
視覚障がい者の Web 利用方法
全盲

主に音声読み上げソフトを利用

ロービジョン(昔は弱視と呼ばれた)

見え方や見えやすい条件に多様な個人差がある
Web 利用方法も様々

  • 音声読み上げソフトを利用
  • 配色・文字サイズ等を変更して利用(カスタム CSS 等)
  • 画面拡大ソフトを利用
  • 画面解像度を調整
  • ディスプレイにレンズをあてて物理的に拡大
音声読み上げソフト
スクリーンリーダー
PC-Talker41,040 円(税込)国内シェア 85.3%
JAWS153,360 円(税込)
NVDA無料オープンソース
ナレーターWindows 標準付属Ctrl + Win + Enter
VoiceOvermacOS, iOS 標準付属
音声ブラウザー
NetReaderⅡ30,240円(税込)要 PC-Talker
IBM Home Page Reader販売終了IE 6 まで
ALTAIRアルティア無料DL リンク切れ...
[デモ] 音声の読み上げを聴いてみよう
視覚障がい者を意識したマークアップ
視覚障がい者を意識したマークアップ
  • img 要素に alt 属性(代替テキスト)をつける
  • ページの内容がわかるページタイトルをつける
  • 1 つのページにコンテンツを詰め込み過ぎない
  • サイト内検索機能を提供する
  • フォームコントロール要素にラベルを付ける
  • 意味のあるタグを使う(なんでもかんでも div にしない)
  • 意味のあるリンクテキストにする(悪い例: “こちら”)
  • すべての機能をキーボードから利用できるようにする
  • 色を唯一の情報伝達手段にしない
    (例: エラーを赤で表現するだけでなくエラー的文言も出す)
  • 前景と背景の間に十分なコントラストを提供する
  • 勝手に動きだすコンテンツ(例: カルーセル)には
    止める手段を提供する
  • 無限スクロールを使わない
もっとほしいひとへ

WCAG ヘッダーのキャプチャーWeb Content Accessibility Guidelines (WCAG) 2.0 [日本語訳]

https://waic.jp/docs/WCAG20/Overview.html

Web Content Accessibility Guidelines (WCAG) 2.0

パッと見ハードル高そうな印象を受けるけど文章は割と平易

ガイドライン 1.1 テキストによる代替: すべての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉などの利用者が必要とする形式に変換できるように、テキストによる代替を提供すること。
ガイドライン 2.1 キーボード操作可能: すべての機能をキーボードから利用できるようにすること。

目次ぐらい目を通しても損にはならない

音声読み上げソフトを意識したマークアップ
音声読み上げソフトを意識したマークアップ
こんなときどうしよう
  1. アイコンボタンの用途を読み上げてほしいけど画面には出したくない
  2. 見た目を派手にするためだけの要素を読み飛ばしてほしい
  3. 「タブ」など HTML タグにない意味を要素に与えたい
  1. アイコンボタンの用途を読み上げてほしいけど画面には出したくない
<button class="icon-button" aria-label="お気に入りに追加">
  <i class="mdi mdi-star"></i>
</button>
  1. 見た目を派手にするためだけの要素を読み上げてほしくない
<p>この要素は読み上げられます</p>
<p aria-hidden="true">この要素は読み上げられません</p>

この要素は読み上げられます

  1. 「タブ」など HTML タグにない意味を要素に与えたい
<div role="tablist" aria-label="Entertainment">
  <button role="tab" aria-selected="true" aria-controls="nils-tab" id="nils">
    Nils Frahm
  </button>
  <button role="tab" aria-selected="false" aria-controls="agnes-tab" id="agnes" tabindex="-1">
    Agnes Obel
  </button>
</div>
<div tabindex="0" role="tabpanel" id="nils-tab" aria-labelledby="nils">
  <p>Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.</p>
</div>
<div tabindex="0" role="tabpanel" id="agnes-tab" aria-labelledby="agnes" hidden="">
  <p>Agnes Caroline Thaarup Obel is a Danish singer/songwriter. Her first album, Philharmonics, was released by PIAS Recordings on 4 October 2010 in Europe. Philharmonics was certified gold in June 2011 by the Belgian Entertainment Association (BEA) for sales of 10,000 Copies.</p>
</div>

Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.

role 属性や aria-* 属性を規定する W3C 勧告

WAI-ARIA ヘッダーのキャプチャーWAIウェイ-ARIAアリア

https://momdo.github.io/wai-aria-1.1/

WAI-ARIA

要素にロールステートプロパティ
付与するための属性の仕様定義

WAI-ARIA のベストプラクティスは
なるべく WAI-ARIA を使わないこと

WAI-ARIA 属性がたくさんあって覚えきれない
WAI-ARIA 属性がたくさんあって覚えきれない
  • WAI-ARIA Authoring Practices に WAI-ARIA 属性の
    使い方と具体例があるのでマネすると話が早い
    (先ほどのタブの例はここから拝借した)

    WAI-ARIA Authoring Practices 1.1

    https://www.w3.org/TR/wai-aria-practices/

  • WAI-ARIA 属性を勝手に付与してくれるような
    コンポーネントライブラリを選べば話が超早い
    jQuery UI や Material UI (React)、 Element (Vue.js) など

  • そもそもなるべく使わない方が良いものなので
    必死に覚えなくていいと思う。個人的には。

視覚障がい者を意識した Web コンテンツ
こんなときどうしよう
  • ボット対策したい
    (利用者がボットではなくヒトであることを確認したい)
ボット対策
CAPTCHA (画像認証)

歪んだ文字画像を表示して文字に起こさせることで
利用者が人間であることを確認するツール

CAPTCHA

画像の代わりに音声を文字に起こす CAPTCHA もある

画像だけの CAPTCHA は視覚障がい者の大敵

ボット対策
No CAPTCHA reCAPTCHA

チェックボックスをクリックするだけで
利用者が人間であることを確認するツール

reCAPTCHA

マウスの動きなどから人間か機械かを判断するらしい
画像/音声 CAPTCHA もオプションとして提供される

アクセシビリティチェックツール
アクセシビリティチェックツール
miChecker (エムアイチェッカー)
JIS X 8341-3:2016 (== WCAG 2.0) に基づく
ウェブアクセシビリティ対応の取組を支援するために
総務省が開発
時間があったら miChecker のデモ
インクルーシブデザインについて
インクルーシブデザインについて

最近『インクルーシブデザイン』という言葉を目にする

『アクセシブル』も『ユニバーサル』も『インクルーシブ』も
「多様な利用者・環境に配慮する」という文脈を形成する意味で
同じように利用される

が、『インクルーシブデザイン』という言葉を選ぶときは
「障がい者や高齢者を巻き込んで一緒にデザインする
という意味を込めたり込めなかったりする点に留意が必要

インクルーシブデザインの原則
(「Inclusive Design Principles」日本語訳)インクルーシブデザインの原則ページキャプチャー

http://inclusivedesignprinciples.org/ja/

↑ とても読みやすいアクセシビリティガイドラインになっていてオススメ

参考文献

視覚障害者のインターネット利用特性と問題分析:みんなのウェブ

http://barrierfree.nict.go.jp/accessibility/proof/report/blind/index.html

視覚障害者の携帯電話・スマートフォン・タブレット・パソコン利用状況調査2013: 新潟大学学術リポジトリ Nuar

http://dspace.lib.niigata-u.ac.jp/dspace/handle/10191/27807

盲目のiPhoneユーザーに聞いた、視覚を使わない驚きのスマホ操作術 | スタッフブログ | マイネ王

https://king.mineo.jp/magazines/special/387

モバイルアクセシビリティ:WCAG 2.0やその他W3C/WAIのガイドラインのモバイルへの適用 - Qiita

https://qiita.com/magi1125/items/2c2e9d78c6db2724a826

エー イレブン ワイ[WebA11y.jp]

http://weba11y.jp/

Tips for Getting Started • WAI

https://www.w3.org/WAI/gettingstarted/tips/

豆知識で終わらせず実践しましょう
(特に自分)